<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    #result{
        width: 300px;
        height: 300px;
        border: 1px solid red;
    }
</style>
<body>
    <a href="/home">home</a>
    <a href="/ref">ref</a>
    <a href="/aaa">aaaaaaaaaaa</a>
    <div id="result"></div>

    <script>
       //获取所有的a链接
       let links = document.querySelectorAll("a");
        //循环遍历所有的a
        links.forEach(item => {
            item.addEventListener("click",function(e){
                //阻止默认行为
                e.preventDefault();

                //使用 history.pushState()  向浏览器追加一条新的纪录
                // history 浏览器历史记录对象
                // pushState(追加新纪录时保存的数据,新纪录的标题,新纪录的url)   
                // push 末尾追加  state 状态

                // 追加新纪录
                history.pushState({id:1,name:"张三"},null,e.target.href);


                console.log(history);

                
                //获取地址栏对象
                // console.log(location);
                let {pathname} = location;

                //判断展示对应的组件
                switch(pathname){
                case "/home":
                    result.innerHTML = "home  home  home ";
                break;
                case "/ref":
                    result.innerHTML = "ref  ref  ref ";
                break;
                default:
                    result.innerHTML = "404 ";
                break;

            }
            })
        })
    </script>
</body>
</html>